<template>
  <div class="add">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/article' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加文章</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域添加 -->
    <el-card>
       <el-alert title="添加文章信息" type="info" center></el-alert>
      <!-- 步骤条 -->
       <el-steps :active="activeIndex" finish-status="success" align-center>
        <el-step title="步骤 1" icon="el-icon-edit"></el-step>
        <el-step title="步骤 2" icon="el-icon-s-promotion"></el-step>
        <el-step title="步骤 3" icon="el-icon-s-claim"></el-step>
      </el-steps>

      <!-- from表单 -->
      <el-form  :model="addForm" ref="ruleForm" label-width="80px" :rules="rules">
        <!-- tab切换 -->
        <el-tabs tab-position="left" stretch @tab-click="handleTab" v-model="activeName">
          <el-tab-pane label="文章标题" name="1">
            <el-form-item label-width="auto" prop="title">
              <el-input placeholder="请输入文章标题" autosize type="textarea" v-model="addForm.title"></el-input>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="文章简介" name="2">
            <el-form-item label-width="auto" prop="des" >
              <el-input placeholder="请输入文章简介" autosize type="textarea" v-model="addForm.des"></el-input>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="文章图片" name="3">
            <el-form-item label-width="auto">
              <el-upload
                action="http://47.107.156.169:3000/api/v1/img"
                :on-success="afterSuccess"
                multiple
                :limit="3">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <el-button type="primary" @click="handlenext" style="margin-top: 20px;">下一步</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="文章内容" name="4">
            <!-- 富文本编辑 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="addForm.content"
              :options="editorOption"
              class="edit"
            />
            <!-- 提交数据 -->
            <el-button class="sumbit_button" type="primary" @click="handleSumbit('ruleForm')">提交</el-button>
             <!-- 返回 -->
            <el-button class="sumbit_button" type="success" @click="handleGo">返回</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 步骤条
      activeIndex: 0,
      // from数据
      addForm: {},
      // 富文本配置
      editorOption: {},
      // 表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        des: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ]
      },
      // tab切换 当前
      activeName: '1'
    }
  },
  created () {},
  methods: {
    // tab切换
    handleTab (val) {
      this.activeIndex = Number(val.index)
    },
    // 提交数据
    handleSumbit (val) {
      // 对表单进行校验
      this.$refs[val].validate(async (is) => {
        if (!is) return this.$message.error('填写不完善，请重新填写')
        const { data: res } = await this.$http.post('/more', this.addForm)
        if (res.meta.status !== 201) return this.$message.error('添加文章失败，请检查内容')
        // 提示添加成功
        this.$message.success('添加文章成功')
        // 重置表单
        this.$refs[val].resetFields()
        // 跳转到文章列表 编程式导航
        this.$router.push('/article')
      })
    },
    // 返回
    handleGo () {
      // this.$router.push('/article')
      this.$router.go(-1)
    },
    // 下一步
    handlenext () {
      this.activeIndex = this.activeIndex + 1
      this.activeName = parseInt(this.activeName) + 1 + ''
    },
    // 图片成功
    afterSuccess (res) {
      this.addForm.img = res.url
    }
  }
}
</script>

<style lang="less" scoped>
.el-card{
  min-height: 600px;
}
.sumbit_button{
  margin-top: 100px;
}
.edit{
  height: 480px;
  min-height: 300px;
  img{max-width: 100%;}
}

</style>
